<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card>
      <template v-if="mode==='create'">
        <!--<q-img src="../../../assets/widgetPreview/RssWidgetPreview.png" alt="" :ratio="4/3"></q-img>-->
        <q-card-section>
          <div class="text-h6">富文本组件</div>
          <div>一个可以通过富文本灵活编辑定制内容的组件 📊</div>
        </q-card-section>
      </template>
      <template v-if="mode==='update'">
        <q-card-section>
          <div class="text-h6">编辑富文本组件</div>
        </q-card-section>
      </template>
      <q-card>
        <q-form
            @submit="submitWidget"
            class="q-gutter-md"
        >
          <q-card-section class="q-pt-none">
            <q-input class="q-mb-sm" bottom-slots
                     v-model="formData.data.title"
                     label="富文本标题" filled
                     hint="不输入则使用隐藏标题栏"
            >
            </q-input>
          </q-card-section>
          <q-card-section class="q-pt-none">
            <WangEditor v-model="formData.data.richText"></WangEditor>
          </q-card-section>
          <q-card-section>
            <q-btn v-if="mode==='create'" type="submit"
                   color="green" icon-right="add" class="full-width"
            >确认添加
            </q-btn>
            <q-btn v-if="mode==='update'" type="submit"
                   color="green" class="full-width"
            >保存编辑
            </q-btn>
          </q-card-section>
        </q-form>
      </q-card>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from 'src/mixins/form'
import { genWidgetId } from 'src/utils/widget'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'
import { defineAsyncComponent } from 'vue'

export default {
  name: 'RichTextWidgetEditForm',
  mixins: [form],
  components: {
    WidgetEditFormContainer,
    WangEditor: defineAsyncComponent(() => import('src/components/wangEditor/WangEditor.vue'))
  },
  props: {
    defaultFormData: {
      type: Object,
      default: () => {
        return {
          data: {
            richText: ''
          }
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    async submitWidget () {
      if (this.mode === 'create') {
        await this.createWidget({
          id: genWidgetId('RICH_TEXT'),
          type: 'RichTextWidget',
          w: 4,
          h: 3
        })
      }
      if (this.mode === 'update') {
        await this.saveWidget()
      }
    }
  }
}
</script>

<style scoped>
</style>
